<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .title-item {
        margin: auto;
        width: 240px;
        height: 140px;
        border: 1px solid #c9c9c9;
        background-color: #48bcc9;
        color: white;
        text-align: center;
      }
      #box {
        padding: 20px;
        box-sizing: border-box;
      }
      .title2 {
        background-color: #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .timebtn-item {
        display: inline-block;
        height: 19px;
        padding: 2px 10px;
        margin-right: 15px;
        background-color: white;
        border: 1px solid #aaa;
        border-radius: 12px;
        font-size: 12px;
        line-height: 19px;
        text-align: center;
        vertical-align: initial;
      }
      .title-r {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .titleinput input {
        width: 100px;
        height: 25px;
      }
      .titleinput {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 50px;
      }
      .timebtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 25px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="title" style="margin-bottom: 20px">
        <div class="title-item">
          <h1>75,124</h1>
          <div>总用户注册数</div>
        </div>
        <div class="title-item" style="background-color: #55b5de">
          <h1>551</h1>
          <div>总活跃用户数</div>
        </div>
        <div class="title-item" style="background-color: #62caa4">
          <h1>0</h1>
          <div>当日新增用户数</div>
        </div>
        <div class="title-item" style="background-color: #e7c45c">
          <h1>0</h1>
          <div>当日活跃用户</div>
        </div>
      </div>
      <div class="title2">
        <div class="title2-l" style="display: flex; align-items: center">
          <span style="width: 5px; height: 15px; background-color: #000; display: inline-block"></span>
          <span style="text-indent: 0.5em; font-size: 14px"> 用户趋势图</span>
        </div>
        <div class="title-r">
          <div class="timebtn">
            <div class="timebtn-item">近3日</div>
            <div class="timebtn-item">近7日</div>
            <div class="timebtn-item">近60日</div>
          </div>
          <div class="titleinput">
            <input type="text" />
            <span style="font-size: 14px; margin: 0px 10px">to</span>
            <input type="text" name="" id="" />
          </div>
        </div>
      </div>
      <div id="main" style="width: 100%; height: 350px"></div>
      <div id="app" style="width: 100%; height: 350px"></div>
      <div class="title2">
        <div class="title2-l" style="display: flex; align-items: center">
          <span style="width: 5px; height: 15px; background-color: #000; display: inline-block"></span>
          <span style="text-indent: 0.5em; font-size: 14px">Top 5 品牌</span>
        </div>
      </div>
    </div>

    <script src="../../js/jquery-3.5.1.min.js"></script>
    <script src="../../js//echarts.min.js"></script>
    <script>
      var chartDom = document.getElementById("main");
      var chartDom2 = document.getElementById("app");
      var myChart = echarts.init(chartDom);
      var myChart2 = echarts.init(chartDom2);
      var option;
      var option2;
      option = {
        title: {
          text: "日增加用户数",
          left: "center",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 10,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        series: [
          {
            type: "line",
            smooth: 0.2,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 2,
            },
            itemStyle: {
              color: "#b0eaef",
            },
            areaStyle: {},
            data: [
              ["15/02/2023", 1],
              ["17/02/2023", 10],
              ["19/02/2023", 6],
              ["21/02/2023", 4],
              ["23/02/2023", 0],
              ["25/02/2023", 0],
              ["27/02/2023", 0],
              ["1/03/2023", 4],
              ["03/03/2023", 3],
              ["05/03/2023", 0],
              ["07/03/2023", 0],
              ["09/03/2023", 0],
              ["11/03/2023", 0],
              ["13/03/2023", 0],
              ["15/03/2023", 0],
              ["17/03/2023", 0],
            ],
          },
        ],
      };
      option2 = {
        title: {
          text: "日活跃用户数",
          left: "center",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 18,
          boundaryGap: [0, "30%"],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        series: [
          {
            type: "line",
            smooth: 0.2,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 2,
            },
            itemStyle: {
              color: "#c0e5f6",
            },
            areaStyle: {},
            data: [
              ["14/02/2023", 4],
              ["16/02/2023", 2],
              ["18/02/2023", 6],
              ["20/02/2023", 7],
              ["22/02/2023", 0],
              ["24/02/2023", 5],
              ["26/02/2023", 0],
              ["28/02/2023", 10],
              ["02/03/2023", 8],
              ["04/03/2023", 0],
              ["06/03/2023", 4],
              ["08/03/2023", 0],
              ["10/03/2023", 0],
              ["12/03/2023", 0],
              ["14/03/2023", 0],
              ["16/03/2023", 0],
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      option2 && myChart2.setOption(option2);
    </script>
  </body>
</html>
